<template>
<transition name="el-zoom-in-top">
    <div 
        class="loading-cp" 
        v-show="state">
        <i class="el-icon-loading"></i>
    </div>
</transition>
</template>

<script>
/*
 顶部加载组件
 */
export default {
    props:{
        state:{
            type:Boolean,
            default:false,
        },
    },
}
</script>
<style lang="scss" scoped>
.loading-cp{
    position: fixed;
    top: 0px;
    left: 50%;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-top: none;
    box-sizing: border-box;
    border-radius: 0 0 50% 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transform: translate(-50%, 0);
    /deep/i{
        font-size: 25px;
    }
}
</style>

